<template>
  <div>
    <Row>
      <Col span="24">
      <Card>
        <p slot="title">
          <Icon type="ios-list"></Icon>
          角色列表
        </p>
        <Row>
          <Input v-model="searchModel.roleName" placeholder="请输入角色名称..." style="width: 300px"></Input>
          <Button type="primary" shape="circle" @click="searchRole" :loading="searchLoading" icon="ios-search">
            <span>搜索角色</span>
          </Button>
        </Row>
        <Row>
          <Button type="info" icon="person-add" style="margin-top:10px;"
                  v-hasPermissionButton="'/admin/role/addRoleButton'" @click="openAddRole">
            <span>添加角色</span>
          </Button>
        </Row>
        <Row type="flex" justify="center" align="middle">
          <Table border :columns="columnHeader" :data="roleList"></Table>
        </Row>
        <Row type="flex" justify="center" align="middle">
          <Page :total="total" :current="current" :page-size="pageSize" :show-tota="showTotal" @on-change="onChange"
                show-elevator></Page>
        </Row>


      </Card>
      </Col>
    </Row>


    <Modal v-model="showSaveAndEdit" :title="saveAndEditTitle" :mask-closable="false" @on-ok="saveOrEditRole">
      <Form :model="roleInfo" label-position="left" :label-width="100">
        <FormItem label="角色名称">
          <Input v-model="roleInfo.roleName"></Input>
        </FormItem>
        <FormItem label="角色状态">
          <Select v-model="roleInfo.state" style="width:200px">
            <Option v-for="item in roleState" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem label="所属机构">
          <Select v-model="roleInfo.organizationId" filterable>
            <Option v-for="organization in organizationList" :value="organization.organizationId"
                    :key="organization.organizationId">{{ organization.organizationName }}
            </Option>
          </Select>
        </FormItem>
        <FormItem label="备注">
          <Input v-model="roleInfo.remark" type="textarea" :autosize="{minRows: 2,maxRows: 5}"
                 placeholder="Enter something..."></Input>
        </FormItem>
      </Form>
    </Modal>

    <Modal v-model="showPermissionMenu" title="授权菜单" :mask-closable="false" @on-ok="saveThePermissionToRole">
      <Tree :data="permissionMenuList" show-checkbox multiple ref="authTree"></Tree>
    </Modal>


  </div>
</template>
<script>
  import util from '@/lib/util.js';

  export default {
    data() {
      return {
        searchLoading: false,
        searchModel: {
          roleName: '',
          pageSize: 10,
          pageNum: 1
        },
        showPermissionMenu: false,
        permissionMenuList: [],
        selectRoleId: null,
        roleState: [
          {
            value: 1,
            label: '有效'
          },
          {
            value: 2,
            label: '无效'
          }
        ],
        roleInfo: {
          roleId: null,
          roleName: '',
          remark: '',
          state: null,
          organizationId: null
        },
        showSaveAndEdit: false,
        saveAndEditTitle: '',
        columnHeader: [
          {
            title: '角色名称',
            key: 'roleName',
            width: 200,
            fixed: 'left'
          },
          {
            title: '创建人ID',
            key: 'createUserId',
            width: 200,
            fixed: 'left'
          },
          {
            title: '创建时间',
            key: 'createDate',
            width: 200,
            fixed: 'left'
          },
          {
            title: '所属机构',
            key: 'organizationId',
            width: 200,
            fixed: 'left'
          },
          {
            title: '备注',
            key: 'remark',
            width: 200,
            fixed: 'left'
          },
          {
            title: '角色状态',
            key: 'state',
            width: 200,
            fixed: 'left'
          },
          {
            title: '操作',
            key: 'action',
            width: 240,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.editRole(params.row)
                    }
                  },
                  directives: [
                    {
                      name: 'hasPermissionButton',
                      value: '/admin/role/editRoleButton'
                    }
                  ]
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.removeRole(params.row)
                    }
                  },
                  directives: [
                    {
                      name: 'hasPermissionButton',
                      value: '/admin/role/deleteRoleButton'
                    }
                  ]
                }, '删除'),
                h('Button', {
                  props: {
                    type: 'warning',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.permissionMenu(params.row)
                    }
                  },
                  directives: [
                    {
                      name: 'hasPermissionButton',
                      value: '/admin/role/saveThePermissionToRoleButton'
                    }
                  ]
                }, '授权菜单')
              ]);
            }
          }
        ],
        roleList: [],
        total: null,
        current: null,
        pageSize: null,
        showTotal: true,
        organizationList: []

      }
    },
    mounted() {
      this.initOrgList();
      this.getRoleList();
    },
    created() {

    },
    methods: {
      searchRole() {
        this.getRoleList();
      },
      openAddRole() {
        this.showSaveAndEdit = true;
        this.saveAndEditTitle = '添加角色';
      },
      onChange(pageNum) {
        this.searchModel.pageNum = pageNum;
        this.getRoleList();
      },
      getRoleList() {
        let that = this;
        this.roleList = [];
        util.queryPost('/admin/role/page', this.searchModel, function (res) {
          let roleList = res.list;
          roleList.forEach(item => {
            that.roleList.push(item);
          });
          that.total = res.total;
          that.current = res.pageNum;
          that.pageSize = res.pageSize;
        })
      },
      editRole(row) {
        this.saveAndEditTitle = '编辑信息';
        this.showSaveAndEdit = true;
        this.roleInfo = row;
      },
      removeRole(row) {
        this.$Modal.confirm({
          title: '提示',
          content: '确定要删除吗?',
          onOk: () => {
            let that = this;
            that.roleList = [];
            util.queryPost('/admin/role/remove', {
              id: row.roleId
            }, function (res) {
              that.getRoleList();
            }, true);

          }
        });
      },

      saveThePermissionToRole() {


        let that = this;
        let data = that.$refs.authTree.getCheckedNodes();
        let menuIds = '';
        let parentIds = '';
        data.forEach(item => {
          if (item.checked) {
            if (item.parentMenuId) {
              parentIds += item.parentMenuId + ',';
            }
            menuIds += item.menuId + ',';
          }
        });
        util.post('/admin/permission/saveThePermissionToRole', {
          roleId: that.selectRoleId,
          menuIds: menuIds + parentIds
        }, function (data) {

        }, true)


      },

      saveOrEditRole() {
        let that = this;
        let url = '';
        if (this.roleInfo.roleId) {
          url = '/admin/role/update'
        } else {
          url = '/admin/role/add'
        }

        util.post(url, this.roleInfo, function (data) {
          that.getRoleList();
        }, true)
      },
      permissionMenu(row) {
        this.permissionMenuList = [];
        let that = this;
        this.selectRoleId = row.roleId;
        util.post('/admin/permission/getPermissionList', {
          roleId: row.roleId
        }, function (data) {
          data.forEach(item => {
            that.permissionMenuList.push(item);
          });
          that.showPermissionMenu = true;
        });

      },
      initOrgList() {
        let that = this;
        that.organizationList = [];
        util.post('/admin/organization/all', {}, function (data) {
          let initOrgList = data;
          initOrgList.forEach(item => {
            that.organizationList.push(item);
          });
        });

      }
    }
  }
</script>
